<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="format-detection" content="telephone=no">
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,  user-scalable=0">
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      <meta name="keywords" content=" web design html template">
      <meta name="date" content="Dec 26">
      <title>Invacat- parsonal Website Template</title>
      <!--------------- favicon img --------------->
      
      <!--------------- bootstrap css --------------->
      <link rel="stylesheet" href="static/css/bootstrap.min.css">
      <!--------------- animation css --------------->
      <link rel="stylesheet" href="static/css/animation.css">
      <!--------------- venobox css --------------->
      <link rel="stylesheet" href="static/css/venobox.min.css">
      <!--------------- slick css --------------->
      <link rel="stylesheet" href="static/css/slick.css">
      <!--------------- animation heading css --------------->
      <link rel="stylesheet" href="static/css/animation-heading.css">
      <!--------------- font-awasome css --------------->
      <link rel="stylesheet" href="static/css/fontawasome.css">
      <!--------------- main css --------------->
      <link rel="stylesheet" href="static/css/style.css">
      <!--------------- responsive css --------------->
      <link rel="stylesheet" href="static/css/responsiver.css">
   </head>
   <body>
      <!-- header-area -->
      <div class="header-area">
         <div class="container-fluid">
            <div class="row">
               <!-- menu content -->
               <div class="col-lg-4">
                  <div class="invacat-header-area">
                     <div class="invacat-header">
                        <nav class="submenu-content">
                           <ul>
                              <li><a href="about.html">About</a></li>
                              <li>
                                 <a href="project.html">Work</a>
                                 <ul>
                                    <li><a href="project-grid.html">Project Grid</a></li>
                                    <li><a href="project.html">Project Filter</a></li>
                                    <li><a href="single-project.html">Single-Project</a></li>
                                 </ul>
                              </li>
                              <li>
                                 <a href="service.html">Service</a>
                                 <ul>
                                    <li><a href="single-service.html">Single Service</a></li>
                                    <li><a href="contact.html">Contact Page</a></li>
                                 </ul>
                              </li>
                           </ul>
                        </nav>
                     </div>
                  </div>
               </div>
               <!-- header logo  -->
               <div class="col-lg-4">
                  <div class="invacat-logo">
                     <a href="index.html"><img src="static/picture/logo.png" alt=""></a>
                  </div>
               </div>
               <!-- invacat-menu-bar -->
               <div class="col-lg-4">
                  <div class="invacat-button">
                     <div class="invacat-popupe">
                        <img src="static/picture/maneu.png" alt="">
                     </div>
                     <!-- popupe-content -->
                     <div class="popupe-menu">
                        <div class="invacat-icon">
                           <i class="fa-solid fa-xmark"></i>
                        </div>
                        <div class="popupe-discription">
                           <p>/ Contact us</p>
                           <h2>Invacat-Personal Bio info.</h2>
                           <p>Creating visual content, such as logos, brochures, infographics, and other branding materials</p>
                           <ul>
                              <li>
                                 <i class="fa-solid fa-location-dot"></i>
                                 <p>Chagrin Boulevard, OH 44124</p>
                              </li>
                              <li>
                                 <i class="fa-solid fa-envelope"></i>
                                 <p>demo@example.com</p>
                              </li>
                              <li>
                                 <i class="fa-solid fa-phone"></i>
                                 <p>+9 440 848 8222</p>
                              </li>
                           </ul>
                        </div>
                        <a class="invacat-button-popupe" href="contact.html">
                           <p>Get in touch</p>
                           <i class="fa-solid fa-arrow-right"></i>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- header end -->
      <!-- mobile menu -->
      <div id="invacat-mobile-nav">
         <div class="invact-logo">
            <div class="logo">
               <a href="index.html"><img src="static/picture/logo-i-w.png" alt=""></a>
            </div>
            <div class="menu-button"><span class="fa-solid fa-bars"></span></div>
         </div>
         <!-- mobile menu content -->
         <ul>
            <li><a href="about.html">About</a></li>
            <li class="parent">
               <a href="project.html">Work</a>
               <ul>
                  <li><a href="project-grid.html">Project Grid</a></li>
                  <li><a href="project.html">Project Filter</a></li>
                  <li><a href="single-project.html">Single-Project</a></li>
               </ul>
            </li>
            <li class="parent">
               <a href="service.html">Service</a>
               <ul>
                  <li><a href="single-service.html">Single Service</a></li>
                  <li><a href="contact.html">Contact Page</a></li>
               </ul>
            </li>
         </ul>
      </div>
      <!-- End Mobile Menu -->
      <!-- breadcrumb area -->
      <div class="breadcrumb-area">
         <div class="container">
            <div class="row">
               <div class="col-lg-12">
                  <div class="breadcrumb-content">
                     <div class="breadcrumb-title">
                        <h1>Single Blog</h1>
                     </div>
                     <div class="breadcrumb-menu">
                        <nav aria-label="breadcrumb">
                           <ol class="breadcrumb text-aling-center">
                              <li class="breadcrumb-item"><a href="#">Home</a></li>
                              <li class="breadcrumb-item active" aria-current="page">Blog</li>
                           </ol>
                        </nav>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- breadcrumb end -->
      <!-- blog area -->
      <div class="witr-blog-right_side-area blog_right_sidebar">
         <div class="container">
            <div class="row">
               <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
                  <div class="row">
                     <!-- ARCHIVE QUERY 1 -->
                     <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="single-blog">
                           <div class="blog-img">
                              <img src="static/picture/single-blog.png" alt="">
                           </div>
                           <div class="blog-content">
                              <div class="blog-meta">
                                 <ul>
                                    <li>Agency</li>
                                    <li>June 20, 2023</li>
                                 </ul>
                              </div>
                              <div class="r-blog-heading">
                                 <h2><a href="#">Diego zuan wrote are atsby Head tance.</a></h2>
                                 <p>Donec vel pellentesque nisl, molestie tempus ligula. Cras massa turpis, pretium nec placerat ornare, sodales ac urna. Sed commodo semper fermentum. Phasellus bibendum lorem nisi, et efficitur sapien dapibus sed. Suspendisse iaculis erat ut enim tincidunt, vitae bibendum lorem mattis. Quisque sed nunc quis nisi aliquam dictum at ac velit. Suspendisse orci nunc, condimentum sit amet lobortis et, maximus ac eros. Curabitur sit amet purus eget leo hendrerit rhoncus a sit amet massa. Aliquam sed posuere ex. Sed maximus sapien ac tortor consequat, non malesuada urna commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra scelerisque luctus. Integer sed aliquam est. Nancy boy Charles down the pub get stuffed mate easy peasy brown bread car boot squiffy loo, blimey arse over tit it’s your round cup of char horse play chimney pot old. Chip shop bonnet barney owt to do with me what a plonker hotpot loo that gormless off his nut a blinding shot</p>
                              </div>
                              <div class="meddile-img">
                                 <h2>Ncare the only theme you will ever need</h2>
                                 <p>Are you taking the piss young delinquent wellies absolutely bladdered the Eaton my good sir, cup of tea spiffing bleeder David mufty you mug cor blimey guvnor, burke bog-standard brown bread wind up barney. Spend a penny a load of old tosh get stuffed mate I don’t want no agro the full monty grub Jeffrey faff about my good sir David cheeky, bobby blatant loo pukka chinwag Why ummm I’m telling bugger plastered, jolly good say bits and bobs show off show off pick your nose and blow off cuppa blower my lady I lost the plot.
                                    Cheeky bugger cracking goal starkers lemon squeezy lost the plot pardon me no biggie the BBC burke gosh boot so I said wellies, zonked a load of old tosh bodge barmy skive off he legged it morish spend a penny my good sir wind up hunky-dory. Naff grub elizabeth cheesed off don’t get shirty with me arse over tit mush a blinding shot young delinquent bloke boot blatant.
                                 </p>
                              </div>
                           </div>
                           <div class="tage-socail">
                              <div class="tage-meta">
                                 <ul>
                                    <li><a href="">Solution</a></li>
                                    <li><a href="">Personal</a></li>
                                 </ul>
                              </div>
                              <div class="socail-icon">
                                 <p>Share</p>
                                 <ul>
                                    <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                                    <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="comments-area">
                     <div class="comment-respond ">
                        <div class="commment_title">
                           <h3> Leave a Comment </h3>
                        </div>
                        <form action="mail.php" method="post" id="contact-form">
                           <div class="comment_forms">
                              <div class="comment_forms_inner">
                                 <div class="comment_field">
                                    <div class="input-field">
                                       <label>Name<em>*</em></label>
                                       <input type="text" name="name" placeholder="">
                                    </div>
                                    <div class="input-field">
                                       <label>E-mail Address<em>*</em></label>
                                       <input type="email" name="email" placeholder="">
                                    </div>
                                 </div>
                                 <div class="comment_field">
                                    <div class="textarea-field">
                                       <label>Comment<em>*</em></label>
                                       <textarea name="comment" placeholder=""></textarea>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <button type="submit" name="ok" class="contack_btn">Post Comment</button> 
                           <div class="row">
                              <div class="col-lg-12 text-left">
                                 <p class="form-messege"></p>
                              </div>
                           </div>
                        </form>
                     </div>
                  </div>
               </div>
               <!-- blog-right -->
               <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12 right_sidebar-right content-right_right_side pdsl">
                  <div class="blog-left-right_side right_side">
                     <div class="right_right_side right_side_recent_data">
                        <div class="single-right_side-item">
                           <h2 class="right_side-title">Recent Posts</h2>
                           <!-- blog-right 01 -->
                           <div class="blog-post-item">
                              <div class="blog-post-image">
                                 <a href="#"><img src="static/picture/blog01.jpg" alt=""></a>
                              </div>
                              <div class="recent-post-text">
                                 <span class="rcomment">April 6, 2023</span>
                                 <h4><a href="#">Industry Trends Throm pen in a Old</a></h4>
                              </div>
                           </div>
                           <!-- blog-right 02 -->
                           <div class="blog-post-item">
                              <div class="blog-post-image">
                                 <a href="#"><img src="static/picture/blog02.jpg" alt=""></a>
                              </div>
                              <div class="recent-post-text">
                                 <span class="rcomment">April 6, 2023</span>
                                 <h4><a href="#">Metallurgy and Beyond: Industry Trends</a></h4>
                              </div>
                           </div>
                           <!-- blog-right 03 -->
                           <div class="blog-post-item">
                              <div class="blog-post-image">
                                 <a href="#"><img src="static/picture/blog03.jpg" alt=""></a>
                              </div>
                              <div class="recent-post-text">
                                 <span class="rcomment">April 6, 2023</span>
                                 <h4><a href="#">A Case of Chronic Throm pen Beyond</a></h4>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="right_right_side right_right_side_categories">
                        <h2 class="right_right_side-title">Categories</h2>
                        <ul>
                           <li><a href="#">Roofing Technology<i class="fa-solid fa-arrow-right"></i></a></li>
                           <li><a href="#">Business Construction<i class="fa-solid fa-arrow-right"></i></a></li>
                           <li><a href="#">Traveling Work<i class="fa-solid fa-arrow-right"></i></a></li>
                           <li><a href="#">Roof Repairing <i class="fa-solid fa-arrow-right"></i></a></li>
                        </ul>
                     </div>
                     <div class="right_right_side right_right_side_meta">
                        <h2 class="right_right_side-title">Tags</h2>
                        <ul>
                           <li><a href="#">Business</a></li>
                           <li><a href="#">Building</a></li>
                           <li><a href="#">Comments</a></li>
                           <li><a href="#">Construction</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- blog end -->
      <!-- footer area -->
      <div class="footer-area">
         <div class="container">
            <div class="row">
               <!-- about-content -->
               <div class="col-lg-4 col-md-6">
                  <div class="single-about">
                     <div class="about-content">
                        <h2>About us</h2>
                        <p>Working exclusively as a quarespace design and developer since early 2016, and my know ledge as a front-end developer all to push this platform further.</p>
                     </div>
                     <div class="abouts-icon">
                        <ul>
                           <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
                           <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
                           <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <!-- newslatter -->
               <div class="col-lg-4 col-md-6 footer-contact">
                  <div class="call-number">
                     <div class="call-address">
                        <img src="static/picture/Comment.png" alt="">
                        <p>If you have questions you can contact us?</p>
                        <a href="contact.html">Contact us</a>
                     </div>
                     <div class="call-num">
                        <p>Or call us</p>
                        <h2>+1 800 642 94 31</h2>
                     </div>
                  </div>
               </div>
               <!-- quick-link -->
               <div class="col-lg-4 col-md-6">
                  <div class="quick-link">
                     <h2>Quick Link</h2>
                     <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Privicy</a></li>
                        <li><a href="#">Free website </a></li>
                        <li><a href="#">Careear</a></li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- footer end -->
      <!---------------------  JS area --------------------------->
      <script src="static/js/jquery.min.js"></script>
      <!--------------------- bootstrap js --------------------------->
      <script src="static/js/bootstrap.min.js"></script>
      <!--------------------- slick js --------------------------->
      <script src="static/js/slick.min.js"></script>
      <!--------------------- waypoint js --------------------------->
      <script src="static/js/waypoint.js"></script>
      <!--------------------- counterup js --------------------------->
      <script src="static/js/counterup.min.js"></script>
      <!--------------------- animation-heading js --------------------------->
      <script src="static/js/animation-heading.js"></script>
      <!--------------------- ajax-mail js --------------------------->
      <script src="static/js/ajax-mail.js"></script>
      <!--------------------- venobox js --------------------------->
      <script src="static/js/venobox.min.js"></script>
      <!--------------------- circle-progress js --------------------------->
      <script src="static/js/circle-progress.js"></script>
      <!--------------------- circle-progress js --------------------------->
      <script src="static/js/jquery.scrollUp.js"></script>
      <!--------------------- scrollUp js --------------------------->
      <script src="static/js/isotope.pkgd.min.js"></script>
      <!--------------------- main js --------------------------->
      <script src="static/js/main.js"></script>
   </body>
</html>